@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-size: 14px;
  }

  :root {
    --primary-gradient: linear-gradient(to right, theme(colors.primary.DEFAULT), theme(colors.secondary.DEFAULT));
  }
}

#app {
  min-height: 100vh;
  width: 100%;
}

/* Typography */
.page-title {
  @apply text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
}

.section-title {
  @apply text-lg font-semibold;
}

/* Layout */
.page-container {
  @apply space-y-4 p-4;
}

.card-container {
  @apply grid grid-cols-1 lg:grid-cols-3 gap-4;
}

.card-content {
  @apply card bg-base-100 shadow-md;
}

.card-body-custom {
  @apply card-body p-4 space-y-3;
}

/* Form elements */
.form-group {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.input-group {
  @apply form-control space-y-1;
}

.input-label {
  @apply label-text font-medium;
}

.input-error-text {
  @apply label-text-alt text-error;
}

/* Buttons */
.btn {
  @apply h-8 min-h-8;
}

.btn-sm {
  @apply h-7 min-h-7;
}

/* Status badges */
.badge {
  @apply px-2 py-1 flex items-center gap-1;
}

.badge-dot {
  @apply w-2 h-2 rounded-full;
}

.badge-dot-pulse {
  @apply animate-pulse;
}

/* Tables */
.table {
  @apply table-sm;
}

.table th {
  @apply text-sm;
}

.table td {
  @apply text-sm py-2;
}

/* Stats */
.stats {
  @apply text-sm;
}

/* Breadcrumbs */
.breadcrumb-container {
  @apply text-sm breadcrumbs mt-1;
}

/* Animations */
.page-transition-enter-active,
.page-transition-leave-active {
  @apply transition-all duration-300 ease-in-out;
}

.page-transition-enter-from,
.page-transition-leave-to {
  @apply opacity-0 translate-y-4;
}

/* Responsive */
@media (min-width: 768px) {
  .page-container {
    @apply p-6;
  }
}

@media (min-width: 1024px) {
  .page-container {
    @apply p-8;
  }
}
